<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        <table>
            <tr>
                <td align="right">手机号：</td>
                <td><input type="text" name="phone"></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td><input type="text" name="pwd"></td>
                <td>&nbsp;</td>
            </tr>
            <tr align="center">
                <td colspan="3">
                    <input type="submit" value=" 注 册 ">
                </td>
            </tr>
        </table>
    </form>
    <script>
        var oF =  document.forms[0];
        oF.onsubmit = function(){
            var phone = testPhone.call(oF.phone);
            var pwd = testPWD.call(oF.pwd);
            if(!phone){
                oF.phone.focus();
            }else if(!pwd){
                oF.pwd.focus();
            }
            return phone && pwd;

        };
        oF.phone.onfocus = function(){
            this.parentNode.nextElementSibling.innerHTML = "<span style='color:gray;'>请输入手机</span>";
        };
        oF.phone.onkeyup = function(){
            var reg = /^\d+$/g;
            if(!reg.test(this.value)){
                if(!isNaN(parseInt(this.value))){
                    this.value = parseInt(this.value);
                }else{
                    this.value = "";
                }
            }
        };
        oF.phone.onblur = testPhone;
        function testPhone(){
            if(this.value !== ""){
                var reg = /^1[3578]\d{9}$/;
                if(reg.test(this.value)){
                    this.parentNode.nextElementSibling.innerHTML = "<span style='color:green;'>√</span>";
                    return true;
                }else{
                    this.parentNode.nextElementSibling.innerHTML = "<span style='color:red;'>手机号码格式有误</span>";
                    return false;
                }
            }else{
                this.parentNode.nextElementSibling.innerHTML = "";
                return false;
            }
        }
        oF.pwd.onfocus = function(){
            this.parentNode.nextElementSibling.innerHTML = "<span style='color:gray;'>请输入密码（8-16位字母数字下划线）</span>";
        };
        oF.pwd.onblur = testPWD;
        function testPWD(){
            if(this.value !== ""){
                var reg = /^\w{8,16}$/;
                if(reg.test(this.value)){
                    this.parentNode.nextElementSibling.innerHTML = "<span style='color:green;'>√</span>";
                    return true;
                }else{
                    this.parentNode.nextElementSibling.innerHTML = "<span style='color:red;'>密码格式有误</span>";
                    return false;
                }
            }else{
                this.parentNode.nextElementSibling.innerHTML = "";
                return false;
            }
        }
    </script>
</body>
</html>